<template>
  <div class="app-container">
    <!--返回上一步-->
    <div class="back-bar-box mb-30">
      <div class="btn-back" @click="$router.go(-1)"><i class="el-icon-back"></i> 返回</div>
      <div class="line"></div>
      <div class="name">已关联课程</div>
    </div>
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline mb-20">
      <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="goEdit()">添加
      </el-button>
    </el-form>

    <el-table :data="list" v-loading="listLoading"  fit
              highlight-current-row>
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>


      <el-table-column label="升序" prop="sort" width="80">
      </el-table-column>

      <el-table-column align="center" prop="typeText" label="类型">
      </el-table-column>

      <el-table-column align="left" label="课程"  width="480">
        <template slot-scope="scope">
          <div class="d-flex">
            <img :src="scope.row.cover" class="cover-image" alt="封面">
            <span class="ml10">{{scope.row.name}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="charge" label="价格">
      </el-table-column>

      <!--<el-table-column align="center" prop="gmtCreate" label="创建时间" width="170"/>
      <el-table-column align="center" prop="gmtModified" label="最近修改时间" width="170"/>-->
      <el-table-column align="center" label="管理" width="200">
        <template slot-scope="scope">
          <el-link type="primary" @click="goEdit(scope.row.id)" v-permission="'path:update'">编辑</el-link>
          <el-link type="danger" @click="removeDataById(scope.row.id)" v-permission="'path:delete'">删除</el-link>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      background
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />

  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [],//表格的数据
        listLoading: false,//数据加载等待动画
        page: 1, //当前页
        limit: 5, //每页记录数
        total: 0, //总记录数
        stepId:this.$route.params.id
      }
    }, created() {
      this.getList()
    }
    , methods: {
      getList() {
        this.api({
          url: `/step-relation/pageListStepRelationCondition/${this.stepId}/${this.page}/${this.limit}`,
          method: 'get',
        }).then(data => {
          //删除视频后重置id
          this.list = data.list;
          this.total = data.totalCount;
        })
      },
      goEdit(id) {
        let s = id ? `/${id}` : `?sid=${this.stepId}`;
        this.$router.push('/learningpath/relation/edit' + s)
      }
    }
  }
</script>
<style scoped>
  .cover-image {
    width: 120px;
    height: 90px;
  }


  .ml10 {
    margin-left: 10px;
  }

  .original-charge {
    text-decoration: line-through;
  }
</style>
